<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>查询页面</title>

    <!-- CSS -->
    <link rel="stylesheet" href="../../static/plugins/layui/css/layui.css" th:href="@{plugins/layui/css/layui.css}"/>
    <link rel="stylesheet" href="../../static/mycss/common.css" th:href="@{mycss/main.css}"/>

</head>
<body style="background-image: url('images/xkk.jpg')">

<div class="searchConditionBox1">
    <form class="layui-form" >
        <div class="layui-form-item input-item">
            <label for="condition1">用户名</label>
            <input type="text" class="layui-input" name="condition1" id="condition1" placeholder="请输入用户名"/>
        </div>
        <div class="layui-form-item input-item">
            <label for="condition2">编号</label>
            <input type="text" class="layui-input" name="condition2" id="condition2" placeholder="请输入编号"/>
        </div>
        <div class="layui-form-item input-item">
            <label for="condition3">查询条件3</label>
            <input type="text" class="layui-input" name="condition3" id="condition3" placeholder="请输入查询条件3"/>
        </div>
        <div class="layui-form-item input-item">
            <label for="condition4">查询条件4</label>
            <input type="text" class="layui-input" name="condition4" id="condition4" placeholder="请输入查询条件4"/>
        </div>
        <div class="layui-form-item input-item">
            <label for="condition5">查询条件5</label>
            <input type="text" class="layui-input" name="condition5" id="condition5" placeholder="请输入查询条件5"/>
        </div>
        <div class="layui-form-item ">
            <button type="reset" class="layui-btn layui-btn-danger btn-reset" style="width: 90px">重置</button>
            <button type="button" class="layui-btn btn-submit" style="width: 90px" id="searchBox_doSearch">查询
            </button>
        </div>
    </form>
</div>

<!-- JS -->
<script type="text/javascript" src="../../static/plugins/layui/layui.js" th:src="@{plugins/layui/layui.js}"></script>
<script type="text/javascript">
    layui.use(['form', 'layer'], function () {
        var $ = layui.jquery;

        /**
         * 表单输入框效果
         */
        $(".input-item").click(function(e){
            e.stopPropagation();
            $(this).addClass("layui-input-focus").find(".layui-input").focus();
        })
        $(".input-item .layui-input").focus(function(){
            $(this).parent().addClass("layui-input-focus");
        })
        $(".input-item .layui-input").blur(function(){
            $(this).parent().removeClass("layui-input-focus");
            if($(this).val() != ''){
                $(this).parent().addClass("layui-input-active");
            }else{
                $(this).parent().removeClass("layui-input-active");
            }
        });

    });

</script>
</body>
</html>